<template>
  <VPage>
    <!-- <el-tabs v-model="activeName" class="pl-4 pr-4" @tab-change="handleChange">
      <el-tab-pane :label="item.label" :name="item.name" v-for="(item, index) in tabList" :key="index"></el-tab-pane>
    </el-tabs> -->
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <VGroup>
          <el-select class="selectClass !w-[120px]" v-model="form.skuRange.type">
            <el-option
              v-for="item in skuOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input v-model="form.skuRange.value" placeholder="" clearable class="w-40" />
        </VGroup>
        <select-platform
          v-model="form.platform_id"
          placeholder="平台"
          style="max-width: 150px"
        ></select-platform>
        <el-input
          v-model="form.sku_cn_title"
          placeholder="产品名称"
          clearable
          class="w-40"
        />
        <!-- <VGroup>
          <div class="v-group-item form-item-bgColor" style="width: 150px">创建时间</div>
          <el-date-picker v-model="form.timeRange.value" type="datetimerange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" style="max-width: 300px"
            :default-time="defaultTime()" />
        </VGroup> -->
        <el-select
          v-model="form.infringement_type"
          style="width: 200px"
          placeholder="类型"
          multiple
          collapse-tags
          collapse-tags-tooltip
        >
          <el-option
            v-for="item in options['goods.GoodsSkuInfringement']?.[0]
              .infringementTypeText"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <VGroup>
          <el-select class="selectClass !w-[120px]" v-model="form.personRange.type">
            <el-option
              v-for="item in personOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <select-personnel
            class="w-40"
            v-model="form.personRange.value"
            :multiple="true"
          ></select-personnel>
        </VGroup>
        <VGroup>
          <el-select class="selectClass !w-[120px]" v-model="form.timeRange.type">
            <el-option
              v-for="item in timeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-date-picker
            v-model="form.timeRange.value"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="max-width: 300px"
            :default-time="defaultTime()"
          />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <VButton
          auth="/goods/goods-management/infringement/add"
          type="primary"
          icon="Plus"
          @click="open('add')"
          >新增
        </VButton>
        <VButton
          auth="/goods/goods-management/infringement/delete"
          :loading="loadings.disable"
          @click="handleDelete()"
        >
          <svg-icon class="mr-1 base-red-color" icon-class="del" />删除
        </VButton>
      </template>
    </VTable>
    <ComModal ref="ComModalRef" :options="options" @query="query"></ComModal>
    <VLog
      ref="InfringementLog"
      class="dialogPublic"
      :api="infringementLogs"
      options="infringementId"
    ></VLog>
    <el-dialog v-model="visible" title="备注" width="600" show-footer draggable>
      <p v-html="remark"></p>
      <template #footer>
        <el-button @click="visible = false">取 消</el-button>
      </template>
    </el-dialog>
  </VPage>
</template>
<script setup name="Goods-managementInfringement" lang="jsx">
import { ElMessage, ElMessageBox } from "element-plus";
import { nextTick, ref, reactive, toRefs } from "vue";
import { queryInfringementList, infringementDelete, infringementLogs } from "./api";
import { getOptions } from "@/api/index";
import VLog from "@/components/VLog";
import VImage from "@/components/Image/index.vue";
import ComModal from "./components/ComModal";
import SelectPlatform from "@/components/SelectPlatform";

const skuOption = [
  { label: "SKU", value: "sku" },
  { label: "自定义SKU", value: "custom_sku" },
];

const personOption = [
  { label: "添加人", value: "create_user" },
  { label: "修改人", value: "create_user01" },
];

const timeOption = [
  { label: "添加时间", value: "create_time" },
  { label: "修改时间", value: "create_user01" },
];

const data = reactive({
  loadings: {},
  platformList: [
    {
      label: "Ebay",
      value: 1,
    },
    {
      label: "Amazon",
      value: 2,
    },
    {
      label: "OTTO",
      value: 3,
    },
    {
      label: "Walmart",
      value: 4,
    },
  ],
  options: [],
});
const { activeName, loadings, platformList, options } = toRefs(data);

// 获取
const fetchOption = () => {
  getOptions({
    name: ["goods.GoodsSpu", "goods.GoodsSkuInfringement"],
  }).then((res) => {
    options.value = res.data;
  });
};
fetchOption();

const tableRef = ref();

const tableOptins = reactive({
  rowConfig: { height: 52 },
  showHeaderOverflow: false,
  showOverflow: false,
  formConfig: {
    data: {
      shop_id: "",
      create_time: "",
      status: "",
      operations_personnel: "",
      skuRange: { type: "sku", value: [], range: true },
      channelRange: { type: "platform_sku", value: [], range: true },
      personRange: { type: "create_user", value: [], range: true },
      timeRange: { type: "create_time", value: [], range: true },
    },
  },
  columns: [
    { type: "checkbox", width: "40" },
    {
      field: "platform_name",
      title: "平台",
      width: "80",
    },
    {
      field: "sku_attr_img",
      title: "图片",
      width: "80",
      slots: {
        default: ({ row }) => {
          return (
            <div class="mt-1">
              <VImage src={row.sku_attr_img} width={46} height={46}></VImage>
            </div>
          );
        },
      },
    },
    {
      field: "sku",
      title: "SkU/自定义SKU",
      width: "180",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <div>{row.sku}</div>
              <div>{row.custom_sku}</div>
            </div>
          );
        },
      },
    },
    {
      field: "sku_cn_title",
      title: "产品名称",
      width: "240",
    },
    {
      field: "url",
      title: "URL",
      width: "180",
    },
    { field: "infringement_type_text", title: "侵权类型", width: "140" },
    {
      field: "brand_name",
      title: "品牌",
      width: "120",
    },

    {
      field: "remark",
      title: "备注信息",
      width: "240",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <el-tooltip class="item" effect="dark" content={row.remark} placement="top">
                <div class="overflow-line2" style="width: 210px">
                  {row.remark}
                </div>
              </el-tooltip>
              {/* {row.remark ? <span class="flex justify-between"><span class="w-44 truncate" >{row.remark}</span> {row.remark.length > 12 && <span class="cursor-pointer base-text-color text-xs" onClick={() => checkRemark(row.remark)}>查看更多</span>}</span> : ''} */}
            </div>
          );
        },
      },
    },
    {
      field: "processing_status",
      title: "处理状态",
      width: "120",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              {row.processing_status == 1 ? (
                <div class="flex items-center bg-status1">未处理</div>
              ) : (
                <div class="flex items-center bg-status2">已处理</div>
              )}
            </div>
          );
        },
      },
    },
    {
      field: "result",
      title: "处理结果",
      width: "120",
    },
    {
      field: "create_username",
      key: "create_username",
      title: "提交人",
      width: "130",
      sortable: true,
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <div>{row.create_username}</div>
              <div class="text-xs text-[#666666]">{row.create_time}</div>
            </div>
          );
        },
      },
    },
    {
      title: "操作",
      width: "150",
      fixed: "right",
      slots: {
        default: ({ row }) => {
          return (
            <div class="table-option">
              <div>
                <VButton
                  auth="/goods/goods-management/infringement/edit"
                  type="primary"
                  link
                  onClick={() => open("view", row.id)}
                >
                  查看
                </VButton>
                <VButton
                  auth="/goods/goods-management/infringement/edit"
                  type="primary"
                  link
                  onClick={() => open("edit", row.id)}
                >
                  编辑
                </VButton>
                <el-button type="primary" link onClick={() => viewLog(row.id)}>
                  日志
                </el-button>
              </div>
            </div>
          );
        },
      },
    },
  ],
  proxyConfig: {
    seq: true,
    sort: true,
    props: {
      result: "data",
      total: "total",
    },
    autoLoad: false,
    ajax: {
      query: async ({ page, form, sort }) => {
        const filterSort = {
          field: sort.field || "id",
          order: sort.order && sort.order != "null" ? sort.order : "asc",
        };
        const res = await queryInfringementList({ ...form, ...page, sort: filterSort });
        return new Promise(function (resolve) {
          resolve({
            data: res.data,
            total: res.total,
          });
        });
      },
    },
  },
});

const handleChange = (platform) => {
  tableRef.value.setForm({
    platform,
  });
  refresh();
};

//更新表格数据
const refresh = () => {
  tableRef?.value.$table.commitProxy("query");
};
//获取已选中的行
const getSelectRow = () => {
  return tableRef?.value.$table.getCheckboxRecords();
};

const handleStatus = async (status) => {
  const records = getSelectRow();
  if (records.length == 0) {
    ElMessage.error("至少选择一项");
  }
  const ids = records.map((i) => i.id);
  try {
    const res = await channelSkuUpdateStatus({
      status,
      ids,
    });
    ElMessage.success(res.message);
    nextTick(() => {
      tableRef.value.query();
    });
  } catch (e) {
    throw Error(e);
  }
};

const relevantRef = ref();
// 关联渠道sku
const relevant = (item) => {
  nextTick(() => {
    if (item) {
      relevantRef.value.open(item);
    } else {
      relevantRef.value.open(null, activeName.value);
    }
  });
};

// 导入
const importRef = ref();
const importFile = () => {
  nextTick(() => {
    importRef.value.open(activeName.value);
  });
};

const query = () => {
  tableRef.value.query();
};

const ComModalRef = ref();
const open = (type, id) => {
  ComModalRef.value.open(type, id);
};

//批量删除
const handleDelete = () => {
  if (!isHandle()) return;
  const records = getSelectRow().map((i) => {
    return i.id;
  });
  ElMessageBox.confirm("此操作将永久删除该项, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    confirmButtonClass: "btnFalses",
  }).then(() => {
    infringementDelete({ ids: records }).then((res) => {
      query();
      ElMessage.success(res.message);
    });
  });

  // DeleteDialogRef.value.open(records)
};

const isHandle = () => {
  const records = getSelectRow();
  return !records.length ? ElMessage.error("请先选择行!") && false : true;
};
//查看日志
const InfringementLog = ref();
const viewLog = (id) => {
  InfringementLog.value.open(id);
};
const visible = ref(false);
const remark = ref("");
// 查看备注
const checkRemark = (val) => {
  visible.value = true;
  remark.value = val;
};
</script>
<style lang="scss" scoped>
.selectClass {
  &:deep(.el-select__wrapper) {
    background-color: var(--base-small-bg-color) !important;
  }
}
</style>
<style lang="scss">
.form-item-bgColor {
  background-color: #fafafa !important;
}

.bg-status1 {
  background: rgba(250, 173, 20, 0.1);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #faad14;
  padding: 4px 7px;
  text-align: center;
  width: 50px;
}

.bg-status2 {
  background: #5f5f5f;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  padding: 4px 7px;
  text-align: center;
  width: 50px;
}
</style>
